home *** CD-ROM | disk | FTP | other *** search
/ Dynamic HTML Construction Kit / Dynamic HTML Construction Kit.iso / source_code / dhtmlunl / dhtml.exe / CD Content / Chap23 / dun23_5.txt < prev    next >
Encoding:
Text File  |  1997-12-18  |  2.2 KB  |  59 lines
  1. <html>
  2.  
  3. <head>
  4.  
  5. <title>Layer Breeder</title>
  6.  
  7. </head>
  8.  
  9. <body bgcolor="white">
  10.  
  11. <script language="Javascript1.2">
  12.  
  13. <!--//
  14.  
  15.  
  16.  
  17. //capture MOUSEDOWN events, routing them to the buildLayer function
  18.  
  19. window.captureEvents(Event.MOUSEDOWN);
  20.  
  21. window.onmousedown = buildLayer;
  22.  
  23.  
  24.  
  25. //The buildLayer function takes the mousedown event, and starts
  26.  
  27. //by creating a new layer object.  After dynamically writing the
  28.  
  29. //html needed for the 'puppy.gif' image, it makes the new layer
  30.  
  31. //visible, and starts a modified slideTo function that moves it
  32.  
  33. //to where the user clicked. Again, the MOUSEDOWN event is released
  34.  
  35. //to ensure that you don't end up overloading your browser with
  36.  
  37. //fifty or so layers moving at once.
  38.  
  39.  
  40.  
  41. function buildLayer(e) {
  42.  
  43.    var newPup = new Layer(50);
  44.  
  45.    newPup.document.write("<img src='puppy.gif' width=50 height=50>");
  46.  
  47.    newPup.document.close();
  48.  
  49.    newPup.moveTo(0,0);
  50.  
  51.    newPup.visibility=true;
  52.  
  53.    slideTo(newPup, e.pageY, e.pageX);
  54.  
  55.    window.releaseEvents(Event.MOUSEDOWN);
  56.  
  57. }
  58.  
  59.  
  60.  
  61. //This modified slideTo function, in the interest of building new layers
  62.  
  63. //as fast as possible, just fires until the layer is beyond
  64.  
  65. //the target coordinate on the screen.  Just for kicks, because it's a
  66.  
  67. //Yorkshire Terrier, and those dogs aren't cheap, it also keeps a running
  68.  
  69. //tally of your total amount in dogs in the status line by
  70.  
  71. //multiplying the number of layers in the layers array by $595 :)
  72.  
  73.  
  74.  
  75. function slideTo(targetLayer, targetTop, targetLeft) {
  76.  
  77.    if((targetLayer.top <= targetTop) || (targetLayer.left <= targetLeft)) {
  78.  
  79.       if (targetLayer.top <= targetTop) targetLayer.top = targetLayer.top  + 15;
  80.  
  81.       if (targetLayer.left <= targetLeft) targetLayer.left = targetLayer.left  + 15;
  82.  
  83.       setTimeout('slideTo(document.layers["'+targetLayer.name+'"],'+targetTop+','+targetLeft+')',1);
  84.  
  85.    } else {
  86.  
  87.      window.captureEvents(Event.MOUSEDOWN);
  88.  
  89.      n = document.layers.length;
  90.  
  91.      self.status = n + ' Puppies, Total Value : $' + (n * 595);
  92.  
  93.   }
  94.  
  95. }
  96.  
  97. //-->
  98.  
  99. </script>
  100.  
  101. <body bgcolor="white">
  102.  
  103.  
  104.  
  105. <layer id="puppy" height=50 width=50 top=0 left=0>
  106.  
  107. <img src="puppy.gif" border=0 height=50 width=50>
  108.  
  109. </layer>
  110.  
  111.  
  112.  
  113. </body>
  114.  
  115. </html>
  116.  
  117.